<template>
	<view class="container">
		<view class="amount_collected">
			<view class="collected_title Medium">收款金额</view>
			<amount-input ref="amountInput" :amountVal="amount" @change="amountChange" @close="amountClose" @open="amountOpen"></amount-input>
			<u-line color="#E1E1E1"></u-line>
			<view class="u-flex u-flex-items-center single_order" @click="isSingle=!isSingle;">
				<text>设置店家单笔付款金额</text>
				<u-icon size="13" color="#999999" :name="isSingle?'arrow-up':'arrow-down'"></u-icon>
			</view>
			<block v-if="isSingle">
				<amount-input ref="singleAmountInput" :amountVal="singleAmount" @change="singleAmountChange" @close="singleAmountClose" @open="singleAmountOpen"></amount-input>
			</block>
		</view>
		<view class="payment_term">
			<view class="u-flex u-flex-items-center u-flex-between term_item" @click="$u.route({url:'/pages/search_shops/search_shops'})">
				<view>
					<view class="option Medium">
						<text>选择收款店面</text>
					</view>
					<view class="return_info">
						<text>{{storeName}}</text>
					</view>
				</view>
				<u-icon size="16" color="#999999" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="tips">
			<view class="u-flex u-flex-items-center tips_title">
				<uni-icons size="20" color="#F26809" custom-prefix="iconfont" type="icon-jinggao"></uni-icons>
				<text>温馨提示：</text>
			</view>
			<view class="tips_text">
				根据国家《资金交易风控管理办法》，线上交易将对收款方和付款方和付款方进行风险控制，请根据用户的消费习惯进行扫码支付，推荐使用支付宝支付；
			</view>
		</view>
		<view class="confirm_btn">
			<u-button size="large" text="确定" :hairline="false" :color="amount>0?'#4179FF':'#BABABA'" :customStyle="{width:'630rpx',height:'80rpx',borderRadius:'12rpx',fontWeight:'600'}" @click="confirmInfo"></u-button>
		</view>
		<u-popup :show="confirmInfoShow" mode="center" :safeAreaInsetBottom="false" :customStyle="{borderRadius:'16rpx'}" @close="confirmInfoClose">
			<view class="confirm_info">
				<view class="confirm_content">
					<view class="info_title Medium">核对收款信息</view>
					<view class="u-flex info_item">
						<text class="name">收款类型：</text>
						<text class="content Medium">收店家款</text>
					</view>
					<view class="u-flex info_item">
						<text class="name">收款店面：</text>
						<text class="content Medium">{{storeName}}</text>
					</view>
					<view class="u-flex info_item">
						<text class="name">收款金额：</text>
						<view class="content Medium">
							<text>¥</text>
							<u-count-to color="#333333" fontSize="14" :duration="100" :startVal="0" :endVal="amount" :decimals="2" separator="," :bold="true"></u-count-to>
						</view>
					</view>
				</view>
				<u-line color="#dddddd"></u-line>
				<view class="u-flex u-flex-items-center">
					<u-button size="large" text="取消" :hairline="false" color="#FFFFFF" :customStyle="{width:'50%',height:'88rpx',fontSize:'32rpx',borderRadius:'12rpx',color:'#999999',fontWeight:'600'}" @click="confirmInfoClose"></u-button>
					<u-line color="#dddddd" direction="col" length="60rpx"></u-line>
					<u-button size="large" text="确定" :hairline="false" color="#FFFFFF" :customStyle="{width:'50%',height:'88rpx',fontSize:'32rpx',borderRadius:'12rpx',color:'#4179FF',fontWeight:'600'}" @click="gotoOrder"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		findByUser,
		makeCollection
	} from '@/config/api.js';
	export default {
		data() {
			return {
				amount: '', //收款金额
				singleAmount: '', //单笔金额
				isSingle: false, //是否设置单笔金额
				confirmInfoShow: false, //确认弹窗
				storeId: '', //店面ID
				storeName: '', //店面名称
				activityDayId: '', //活动日id
			};
		},
		onLoad(options) {
			let that = this;
			if (options && options.params) {
				let storeInfo = JSON.parse(options.params);
				that.$u.vuex('vuex_token', storeInfo.token);
				that.$u.vuex('vuex_userId', storeInfo.userId);
				that.getFindByUser(); //获取用户信息
			}
			if (options && options.formData) {
				let formData = JSON.parse(options.formData);
				that.amount = formData.amount; //收款金额
				that.singleAmount = formData.singleAmount; //单笔金额
				that.isSingle = formData.isSingle; //是否设置单笔金额
				that.storeId = formData.storeId;
				that.storeName = formData.storeName;
			}
		},
		methods: {
			// 获取用户信息
			getFindByUser() {
				var that = this;
				let params = {
					token: that.vuex_token,
					userId: that.vuex_userId
				}
				findByUser(params).then(res => {
					that.$u.vuex('vuex_user', res.data);
				}).catch(err => {
					console.log('findByUser=', err);
				});
			},
			initData() {
				var that = this;
				that.amount = ''; //收款金额
				that.singleAmount = ''; //单笔金额
				that.isSingle = false; //是否设置单笔金额
				that.storeId = ''; //店面ID
				that.storeName = ''; //店面名称
				that.activityDayId = ''; //活动日id
			},
			amountOpen() {
				var that = this;
				let singleAmountInput = that.$refs.singleAmountInput;
				if (uni.$u.test.isEmpty(singleAmountInput) === false) {
					singleAmountInput.closeKeyboard();
				}
			},
			amountClose() {
				// console.log('关闭金额输入框');
			},
			singleAmountOpen() {
				var that = this;
				let amountInput = that.$refs.amountInput;
				if (uni.$u.test.isEmpty(amountInput) === false) {
					amountInput.closeKeyboard();
				}
			},
			singleAmountClose() {
				// console.log('关闭单笔收款金额输入框');
			},
			amountChange(val) {
				this.amount = val;
			},
			singleAmountChange(val) {
				this.singleAmount = val;
			},
			confirmInfo() {
				var that = this;
				if (uni.$u.test.isEmpty(that.amount)) {
					return uni.$u.toast('请输入收款金额');
				}
				if (parseFloat(that.amount) <= 0) {
					return uni.$u.toast('请输入正确的金额');
				}
				if (uni.$u.test.isEmpty(that.storeId)) {
					return uni.$u.toast('请选择收款店面');
				}
				that.confirmInfoOpen();
			},
			confirmInfoOpen() {
				this.confirmInfoShow = true;
			},
			confirmInfoClose() {
				this.confirmInfoShow = false;
			},
			gotoOrder() {
				var that = this;
				let params = {
					token: that.vuex_token,
					type: 102,
					storeId: that.storeId,
					orderMoney: that.amount,
					singlePaymentAmount: that.singleAmount
				};
				makeCollection(params).then(res => {
					that.confirmInfoClose();
					that.initData();
					uni.$u.route({
						url: '/pages/orders/orders',
						params: params
					});
				}).catch(err => {
					console.log('makeCollection=', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;

		.container {
			position: relative;
			height: 100vh;
			padding-top: 20rpx;
			box-sizing: border-box;

			.amount_collected {
				position: relative;
				z-index: 5;
				padding: 30rpx 40rpx 0;
				background-color: #FFFFFF;

				.collected_title {

					font-size: 30rpx;
					color: #333333;
					margin-bottom: 6rpx;
				}

				.single_order {
					height: 118rpx;

					text {

						font-size: 26rpx;
						color: #4179FF;
						margin-right: 20rpx;
					}
				}
			}

			.payment_term {
				background-color: #FFFFFF;
				padding: 0 40rpx;
				margin-top: 20rpx;

				.term_item {
					height: 120rpx;

					.option {

						font-size: 30rpx;
						color: #333333;
						line-height: 34rpx;
					}

					.return_info {

						font-size: 26rpx;
						color: #888888;
						line-height: 30rpx;
						margin-top: 12rpx;
					}
				}
			}

			.tips {
				background-color: #FFFFFF;
				padding: 28rpx 40rpx 40rpx;
				margin-top: 20rpx;

				.tips_title {

					text {

						font-size: 26rpx;
						color: #F26809;
						margin-left: 14rpx;
					}
				}

				.tips_text {

					font-size: 26rpx;
					color: #888888;
					margin-top: 28rpx;
				}
			}

			.confirm_btn {
				position: absolute;
				bottom: 76rpx;
				z-index: 3;
				width: 100vw;
			}

			.confirm_info {
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.confirm_content {
					padding: 48rpx 48rpx 2rpx;

					.info_title {

						font-size: 34rpx;
						color: #333333;
						line-height: 44rpx;
						text-align: center;
						margin-bottom: 60rpx;
					}

					.info_item {
						margin-bottom: 40rpx;

						.name {

							font-size: 28rpx;
							color: #888888;
							white-space: nowrap;
						}

						.content {
							flex: 1;
							max-width: 368rpx;

							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}
		}

		/deep/.key-container {
			z-index: 6;
		}
	}
</style>